<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<span id="h"></span>:
<span id="m"></span>:
<span id="s"></span>
</body>

<script>

    let h = document.getElementById("h");   // 通过唯一的id值，可以得到某一个html标签对象
    let m = document.getElementById("m");
    let s = document.getElementById("s");

    function ff() {
        let myDate = new Date();
        let hours = myDate.getHours();
        var h01 = hours/10;
            if (h01 < 1){
                h.innerHTML = "0"+hours;
            }
            else {
        h.innerHTML = hours;
            }
            // 把js获取的时间值，注入到这个标签中去

            let minutes = myDate.getMinutes();
            var m01 = minutes/10;
            if (m01 < 1){
                m.innerHTML = "0"+minutes;
            }
            else {
        m.innerHTML = minutes;
            }

            let seconds = myDate.getSeconds();
            var s01 = seconds/10;
            if (s01 < 1){
                s.innerHTML = "0"+seconds;
            }
            else {
        s.innerHTML = seconds;
            }
        }
        setInterval(ff, 1000);
        // setTimeout   // setInterval和setTimeout都是定时任务执行，但是setInterval会自身死循环执行，而setTimeout只会执行一次
    var action = 0;
    function f(){
        if (action==0){
            action++;
            document.bgColor="red";
        }
        else if (action==1){
            action++;
            document.bgColor="blue";
        }
        else {
            action=0;
            document.bgColor="yellow";
        }
    }
    setInterval(f,1000);
</script>
</html>